<template>
  <div style="padding: 10px 15px">

    <!-- 查询条件-->
    <div class="filter-container">
      <el-select
        v-model="form.type"
        filterable
        class="filter-item"
      >
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>
    
      <el-button
        class="filter-item seachbttn"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查询</el-button
      >
    </div>
    <!--查询条件 end-->

    <div class="filter_fenge" />
    <div class="filter-container">
      <el-button
        class="filter-item bttnleft"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >新增</el-button>
    </div>
    <!--table-->
    <el-table
      v-loading="listLoading"
      :data="PymcverrcdData"
      fit
      highlight-current-row
      style="width: 100%"
      stripe
    >
      <el-table-column label="升级程序地址" align="left" min-width="450px">
        <template slot-scope="{ row }">
          <span>{{ row.verurl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="升级内容" align="left" min-width="450px">
        <template slot-scope="{ row }">
          <span>{{ row.comment }}</span>
        </template>
      </el-table-column>
      <el-table-column label="版本号" align="left" min-width="120px">
        <template slot-scope="{ row }">
          <span>{{ row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="left" min-width="120px">
        <template slot-scope="{ row }">
          <span>{{ row.dtStr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改人" align="left" min-width="100px">
        <template slot-scope="{ row }">
          <span>{{ row.uptr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="PosServer版本类型" align="left" min-width="100px" v-if="false">
        <template slot-scope="{ row }">
          <span>{{ row.PosType }}</span>
        </template>
      </el-table-column>

      <!--
          <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
     -->
    </el-table>

    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData(this)"
    />

    <!--table-->
    <!--弹出层 模块-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="false"
    >
      <el-form :model="form" :inline="true" label-position="right">
        <el-form-item label=" 升级程序地址">
          <!-- {{form}} -->
          <el-input v-model="form.verurl" />
        </el-form-item>
        <el-form-item label=" 升级内容">
          <el-input v-model="form.comment" />
        </el-form-item>
        <el-form-item label=" 版本号">
          <el-input v-model="form.version" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              <span v-html="item.label" />
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="PosServer版本类型" v-show="form.type=='2'"> 
          <el-select v-model="form.postype">
            <el-option v-for="item in PostypeList" :key="item.value" :label="item.label" :value="item.value">
              <span v-html="item.label" />
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--详情-->
    <el-dialog title="详情" :visible.sync="dialogdetailsVisible" width="55%">
      <el-form
        :model="details_form"
        :inline="true"
        label-position="right"
      />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { AjaxToken } from '@/api/common'
import { SelectAjax } from '@/api/common'
import 'url-search-params-polyfill'
export default {
  name: 'PyMcVerRcd',
  components: { Pagination },
  data() {
    return {
      formLabelWidth: '120px',
      PymcverrcdData: null,
      typeList:[{label:'支付',value:'1',selected:true},{label:'PosServer',value:'2',selected:false}],
      PostypeList:[{label:'DLL',value:'DLL',selected:false},{label:'Bin',value:'Bin',selected:true}],
      listQuery: {
        title: '',
        total: 0,
        page: 1,
        limit: 10,
        type:1
      },
      listLoading: true,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      form: {
        iD: '',
        verurl: '',
        comment: '',
        version: '',
        type:'1',
        dt: '',
        uptr: '',
        postype:'Bin'
      },
      details_form: {
        iD: '',
        verurl: '',
        comment: '',
        version: '',
        type:'1',
        dt: '',
        uptr: '',
        postype:''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClose() {},
    handleFilter(row) {
      this.listQuery.page = 1;
      this.fetchData();
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      console.log(this.form.type);
    },
    handleClick(row) {
      var params = new URLSearchParams()
      params.append('id', row.id)
      this.dialogdetailsVisible = true
    },
    saveForm() {
      if (this.form.verurl == '') {
        this.$message({
          message: '升级程序地址不能为空',
          type: 'error'
        })
        return
      }
      if (this.form.comment == '') {
        this.$message({
          message: '升级内容不能为空',
          type: 'error'
        })
        return
      }
      if (this.form.version == '') {
        this.$message({
          message: '升级版本不能为空',
          type: 'error'
        })
        return
      }

      var params = new URLSearchParams()
      params.append('ID', this.form.iD)
      params.append('Verurl', this.form.verurl)
      params.append('Comment', this.form.comment)
      params.append('Version', this.form.version)
      params.append('Type', this.form.type)
      params.append('PosType', this.form.postype)
      backstage.AddPymcverrcd(this, params)
      this.form.verurl = ''
      this.form.comment = ''
      this.form.version = ''
    },
    fetchData() {
      var params = new URLSearchParams()
      params.append(
        'Parms',
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          '}'
      )
      params.append("Type", this.form.type);
      backstage.GetPymcverrcdList(this, params)
    }
  }
}

// 后台事件
var backstage = {
  // 获取Pymcverrcd集合
  GetPymcverrcdList: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'GetPymcverrcdList',
      params,
      'post',
      function(res) {
        thisobj.listLoading = false
        var body = res.data.data
        thisobj.PymcverrcdData = body.rows
        thisobj.listQuery.page = body.page
        thisobj.listQuery.total = body.records
      },
      function(err) {}
    )
  },
  AddPymcverrcd: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'AddPymcverrcd',
      params,
      'post',
      function(res) {
        var body = res.data
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'success',
            duration: 2000
          })
          thisobj.fetchData()
          thisobj.dialogFormVisible = false
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'error'
          })
        }
      },
      function(err) {}
    )
  }
}
</script>

